因為套件太多語法都不同，所以來盤點用了哪些套件吧!

pure-admin-thin github連結

  "dependencies": {
    "@ctrl/tinycolor": "^3.4.1",
    "@pureadmin/components": "^1.1.0",
    "@pureadmin/descriptions": "^1.1.0",
    "@pureadmin/table": "^1.2.0",
    "@pureadmin/utils": "^0.1.1",
    "@vueuse/core": "^9.1.1",
    "@vueuse/motion": "^2.0.0-beta.12",
    "@vueuse/shared": "^9.1.1",
    "animate.css": "^4.1.1",
    "axios": "^0.27.2",
    "dayjs": "^1.11.4",
    "echarts": "^5.3.3",
    "element-plus": "^2.2.16",
    "element-resize-detector": "^1.2.3",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "lodash-unified": "^1.0.2",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
    "pinia": "^2.0.21",
    "qs": "^6.11.0",
    "resize-observer-polyfill": "^1.5.1",
    "responsive-storage": "^2.1.0",
    "vue": "^3.2.39",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.5",
    "vue-types": "^4.2.1",
    "vxe-table": "^4.3.2",
    "xe-utils": "^3.5.6"
  },

筆者這邊介紹順序就依照喜好來安排:

常見的兄弟們

vue

前端御三家之一，簡單好用的語法(v-if v-for)是多數人認為三者最好上手的框架

來源: http://blog.natsusola.net/2018/02/blog-post_53.html

vue-router

透過路由(網址)控制要渲染什麼畫面
vue-router 官網

pinia

共用儲存區，方便我們在不同組件(components)傳遞資料
第六天 10分鐘略懂 pinia (vue的共用儲存區)

axios

打API的套件，用法和 js 原生的fetch很類似

//範例來源: https://zetcode.com/javascript/axios/
const axios = require('axios');

axios.get('http://webcode.me').then(resp => {

    console.log(resp.data);
});

除了基本使用還有攔截器(Interceptors)功能，在請求&回應多了一個中介層可以做某些判斷
axios interceptors

vue-i18n

多國語系套件
vue-i18n官方

element-plus

以vue3為基底的組件庫
https://element-plus.org/zh-CN/

mitt

資料傳遞
https://github.com/developit/mitt

資料處理

lodash系列

處理資料的 JavaScript函式庫

• "lodash"
  • https://lodash.com/
• "lodash-es"
• "lodash-unified"

xe-utils

工具庫
https://x-extends.github.io/xe-utils/#/

dayjs

超級受歡迎的時間處理套件
https://github.com/iamkun/dayjs

檢查

vue-types

受到 react prop-type 啟發製作的 vue 型別檢查套件
https://github.com/dwightjack/vue-types

其他

qs

url解析
https://github.com/ljharb/qs

js-cookie

處理 cookie
https://github.com/js-cookie/js-cookie

nprogress

進度條
https://ricostacruz.com/nprogress/

vxe-table

vue的table套件 功能強大
https://github.com/x-extends/vxe-table

echarts

和 chart.js 類似的圖表套件
https://echarts.apache.org/handbook/zh/get-started/

@vueuse 系列

vueuse 是 vue3 的 Composition API 大集合 (函式工具庫)

• "@vueuse/shared"
  • 核心一
• "@vueuse/core"
  • 核心二
  • https://github.com/vueuse/vueuse
• "@vueuse/motion"
  • 動畫 有抖動效果
  • https://github.com/vueuse/motion

<template>
  <div
    v-motion
    :initial="{
      opacity: 0,
      y: 100,
    }"
    :enter="{
      opacity: 1,
      y: 0,
    }"
  />
</template>

從範例可以看出在任何標籤都能掛載 v-motion
搭配 :initial 可以更改元素元素初始位置和透明度
:enter 是進入後更改元素位置和透明度 達到動畫效果

更多變數使用:
https://motion.vueuse.org/variants.html#initial-variant

@pureadmin 系列

pureadmin 的作者有針對 element-plus 進行再次封裝
以及寫一些共用工具庫

• "@pureadmin/components"
  • https://www.npmjs.com/package/@pureadmin/components
• "@pureadmin/descriptions"
  • https://github.com/xiaoxian521/pure-admin-descriptions
• "@pureadmin/table"
  • https://github.com/xiaoxian521/pure-admin-table
• "@pureadmin/utils"
  • https://pure-admin-utils.vercel.app/
• responsive-storage
  • https://github.com/xiaoxian521/responsive-storage

mockjs

隨機生成假資料，方便前端先有資料串接畫面
https://github.com/nuysoft/Mock/wiki/Getting-Started

@ctrl/tinycolor

有關顏色轉換與操作的庫
https://www.npmjs.com/package/@ctrl/tinycolor

來源: https://tinycolor.vercel.app/

監控元素大小變化

element-resize-detector

https://github.com/wnr/element-resize-detector

resize-observer-polyfill

https://github.com/que-etc/resize-observer-polyfill
demo:
https://que-etc.github.io/resize-observer-polyfill/

補充:
作者最後選擇 tailwindcss 的原因
https://pure-admin-doc.vercel.app/pages/39156f/#cssnano